<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="100">
			<Row class="p-1">
				<Col span="12">
					<FormItem class="" label="名称">
						<Input v-model="distributor.name" placeholder="请输入名称"></Input>
					</FormItem>
					<FormItem class="" label="电话">
						<Input v-model="distributor.tel" placeholder="请输入电话"></Input>
					</FormItem>
					<FormItem class="" label="封面">
						<div class="d-flex flex-row">
							<label class="ivu-input">{{coverFile.name}}</label>
							<label style="line-height: 30px;" class="ivu-btn ivu-btn-default ml-1" for="cover">选择文件</label>
							<input @change="fileChange($event)" id="cover" style="display: none;" type="file"></input>
						</div>
						
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem :class="accountFlg ? 'ivu-form-item-error' : ''" label="账户">
						<!-- <Input on-blur="" v-model="distributor.account" placeholder="请输入账户"></Input> -->
						<input @blur="blurAccount" class="ivu-input" v-model="distributor.account" placeholder="请输入账户" />
						<div v-if="accountFlg" class="ivu-form-item-error-tip">当前输入的账户已存在</div>
					</FormItem>
					<FormItem class="" label="密码">
						<Input v-model="distributor.password" placeholder="请输入密码"></Input>
					</FormItem>
					<FormItem class="" label="确认密码">
						<Input v-model="distributor.cPassword" placeholder="请确认密码"></Input>
					</FormItem>
				</Col>
			</Row>
			<Row class="p-1">
				<Col span="12">
					<FormItem class="" label="详细地址">
						<Input type="textarea" v-model="distributor.address" placeholder="输入详细地址"></Input>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem class="text-right">
						<Button @click="submit" type="primary">提交</Button>
						<Button @click="cancel" class="ml-2">取消</Button>
					</FormItem>
				</Col>
			</Row>
	
			
			
			
		</Form>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				accountFlg: false,
				distributor: {
					name: "",
					account: "",
					password: "",
					cPassword: "",
					tel: "",
					address: "",
					img: "",
					statu: true,
				},
				coverFile: {
					name: "",
					file: undefined,
				}
			}
		},
		methods: {
			blurAccount: function() {
				let self = this;
				self.http.get({
					url: "/distributor/info/account/ex/"+this.distributor.account
				}).then(function(res) {
					self.accountFlg = res;
				});
			},
			fileChange: function(e) {
				this.coverFile.file = e.target.files[0];
				this.coverFile.name = this.coverFile.file.name;
				this.coverFile.onProgress = this.onProgress;
			},
			onProgress: function(pData) {
				console.log(pData);
			},
			submit: function() {
				let self = this;
				
				if (this.accountFlg) {
					this.message.error("当前输入的账户已存在");
					return;
				}
				
				if (this.distributor.name.length === 0) {
					this.message.error("请输入经销商名称");
					return;
				}
				
				if (this.distributor.account.length === 0) {
					this.message.error("请输入经销商账户");
					return;
				}
				
				if (this.distributor.password.length === 0) {
					this.message.error("请输入经销商密码");
					return;
				}
				if (this.distributor.cPassword.length === 0) {
					this.message.error("请确认经销商密码");
					return;
				}
				
				if (this.distributor.password !== this.distributor.cPassword) {
					this.message.error("密码和确认密码不相等");
					return;
				}
				
				if (this.distributor.tel.length === 0) {
					this.message.error("请输入经销商电话");
					return;
				}
				
				if (this.distributor.address.length === 0) {
					this.message.error("请输入经销商详细地址");
					return;
				}

				if (this.common.isEmptyString(this.coverFile.name)) {
					this.message.warning("请选择封面文件");
					return;
				}
				
				this.common.submitFile(this.coverFile).then(function(res) {
					self.distributor.img = res.Location;
					self.http.post({
						url: "/distributor/info",
						param: self.distributor
					}).then(data => {
						self.message.info("添加成功");
						self.$tabs.close();
					});
					
				}).catch(function(err) {
					this.message.error("封面文件上传失败，取消新增经销商。");
				});
				
				
				
				
			},
			cancel: function() {
				this.$tabs.close();
			},
			init: function() {
				
			}
		},
		created: function(){
			this.init();
		}
	}
</script>

<style>
</style>
